<template>
  <div :class="props.visible ? 'colorSelect' : 'colorSelect visible'">
    <input type="color" v-model="color" />
    <span>{{ color }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: () => ''
  },
  visible: {
    type: Boolean,
    default: () => true //true显示 false不显示
  }
})

const emit = defineEmits(['update:modelValue'])

watch(
  () => props.modelValue,
  () => {
    color.value = props.modelValue
  }
)

const color = ref('')

watch(
  () => color.value,
  () => {
    emit('update:modelValue', color.value)
  }
)
</script>

<style scoped lang="scss">
.visible {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  input {
    width: 100%;
    height: 100%;
  }
}
.colorSelect {
  cursor: pointer;
}
</style>
